<template>
  <div>
    <top :activeIndex=2></top>
    <div id="container">
      <div class="clearfix">
        <div class="content_l">
          <div class="c_detail">
            <div style="background-color:#fff;" class="c_logo">
              <a title="上传公司LOGO" id="logoShow" class="inline cboxElement" href="#logoUploader">
                <img v-if="company.companyImg" :src="this.$config.url+company.companyImg" class="avatar"
                     style="height: 190px;width: 190px">
                <div v-else><img src="../../components/hrWork/img/noImg.gif"
                                 style="height: 190px;width: 190px"></div>
              </a>
            </div>
            <div class="c_box companyName">
              <h2 style="height: 30px">{{company.companyName}}</h2>

              <div class="clear"></div>
              <h1 title="" class="fullname">{{company.companyName}}</h1>
              <h1 title="" class="fullname">公司文化：{{company.culture}}</h1>
            </div>
            <div class="clear"></div>
          </div>
          <div id="Profile">
            <div class="profile_wrap">
              <!--有介绍-->
              <dl class="c_section">
                <dt>
                  <h2><em></em>公司介绍</h2>
                </dt>
                <dd>
                  <div class="c_intro">{{company.introduce}}</div>
                </dd>
              </dl>
            </div>
          </div>
          <dl id="noJobs" class="c_section">
            <dt>
              <h2><em></em>招聘职位</h2>
            </dt>
            <dd>
              <ul class="hot_pos reset" v-loading="loading">
                <li class="odd clearfix" v-for="item  in pageInfo.list" :key="item.positionId">
                  <div class="hot_pos_l">
                    <div class="mb10">
                      <a @click="goPositionDetail(item.positionId)" target="_blank">{{item.positionName}}</a>&nbsp;
                      <span class="c9">[{{item.city}}]</span>
                    </div>
                    <span><em class="c7">月薪：</em>{{item.minSalary}}-{{item.maxSalary}}</span>
                    <span><em class="c7">经验：</em> {{item.workExp}}</span>
                    <span><em class="c7">最低学历： </em>{{item.eduRequirements}}</span>
                    <br/>
                    <span><em class="c7">职位诱惑：</em>{{item.welfare}}</span>
                    <br/>
                    <span>{{makeDate(item.createTime)}}发布</span>
                  </div>
                  <div class="hot_pos_r">
                    <div class="apply">
                      <el-button type="warning" size="mini" :disabled="!isUser">投个简历</el-button>
                    </div>
                  </div>
                </li>

                <div style="float: right">
                  <el-pagination
                          background
                          layout="prev, pager, next"
                          :total="pageInfo.total"
                          :page-size="pageInfo.pageSize"
                          @current-change="handlePage"
                  >
                  </el-pagination>
                </div>
              </ul>
            </dd>
          </dl>

        </div>
        <div class="content_r">
          <div id="Tags">
            <div id="c_tags_show" class="c_tags solveWrap">
              <table>
                <tbody>
                <tr>
                  <td width="45">地点</td>
                  <td>{{company.address}}</td>
                </tr>
                <tr>
                  <td>领域</td><!-- 支持多选 -->
                  <td title="移动互联网">{{company.business}}</td>
                </tr>
                <tr>
                  <td>规模</td>
                  <td>{{company.size}}人</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div><!-- end #Tags -->

          <div id="Member">
            <!--有创始团队-->
            <dl class="c_section c_member">
              <dt>
                <h2><em></em>创始人</h2>
              </dt>
              <dd>
                <div class="member_wrap">
                  <!-- 显示创始人 -->
                  <div class="member_info">
                    <div class="m_portrait">
                    </div>
                    <div class="m_name">
                      <span>CEO：{{company.chairman}}</span>
                      <a target="_blank" class="weibo" href="http://weimob.weibo.com"></a>
                    </div>

                  </div>

                </div><!-- end .member_wrap -->
              </dd>
            </dl>
          </div> <!-- end #Member -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import top from '../../components/header/Header'
  import {makeDate,makeSimpleDate} from "../../common/js/dateformat"
  export default {
    name: "company-detail",
    components: {
      top
    },
    data() {
      return {
        pageIndex: 1,
        isUser: false,
        loading: false,
        companyId: '',
        company: {},
        pageInfo: {}
      }
    },
    created() {
      this.companyId = this.$route.query.companyId;
      this.getCompanyById();
      this.getPositionById();
      this.setUser()//记录登录的user
    },
    methods: {
      getCompanyById() {
        this.loading = true;
        this.$ajax.post(this.$config.url + `/company/selCompanyById/${this.companyId}`
        ).then(res => {
          if (res.data.message === "succ") {
            this.company = res.data.object;
          } else {
            this.$message.error("无该公司信息！")
          }
          this.loading = false;
        }).finally(() => {
        })
      },
      setUser(){
        var user= this.$store.state.user;
        if (JSON.stringify(user) !== "{}") {
          this.user = user;
          this.isUser=true;
        }
      },
      getPositionById(){
        this.loading = true;
        console.log("11");
        this.$ajax.post(this.$config.url + `/position/selPositionByComId/${this.pageIndex}`,{
            "companyId":this.companyId
          }
        ).then(res => {
          this.pageInfo = res.data;
          this.loading = false;
        }).finally(() => {
        })
      },
      goPositionDetail(positionId){
        this.$router.push(`/positionDetail/${positionId}`)
      },
      makeSimpleDate(date) {
        return makeSimpleDate(date);
      },
      makeDate(date){
        return makeDate(date)
      },
      handlePage(val){
        //console.log(val)
        this.pageIndex = val
        //加载数据
        this.getPosition()
      }
    }
  }
</script>

<style scoped>
 em{
   font-style: normal;
 }
  .content_l {
    float: left;
    width: 680px;
  }

  .m_name span {
    font-size: 18px;
    color: #999999;
  }

  .c_detail {
    min-height: 200px;
    margin-bottom: 30px;
    position: relative;
  }

  .c_detail_bg {
    background: #fafafa;
    padding-bottom: 20px;
  }

  .c_detail .c_logo {
    position: absolute;
    left: 0;
    height: 196px;
    width: 196px;
  }

  /* .c_detail .c_logo img{border:3px solid #91cebe;} */
  .c_detail .c_logo img {
    position: absolute;
    left: 0;
  }

  .c_detail #logoShow {
    display: block;
    position: relative;
    background: none;
    padding: 0;
    margin: 0;
    height: 190px;
    width: 190px;
    border: 3px solid #91cebe;
  }

  .c_detail #logoShow span {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0px;
    height: 50px;
    width: 180px;
    display: block;
    padding: 10px 0 0 10px;
    background: #000;
    filter: alpha(Opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    cursor: pointer;
  }

  .c_detail input[type="file"] {
    width: 190px;
    height: 190px;
    position: absolute;
    top: 0;
    filter: alpha(Opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    cursor: pointer;
  }

  .c_box {
    margin: 0 30px 0 220px;
  }

  .c_box h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
    font-weight: normal;
    float: left;
  }

  /**add by nancy**/
  .companyName h2 {
    width: 300px;
    height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /**add end by nancy**/
  .c_box h1.fullname {

    font-size: 18px;
    line-height: 30px;
    color: #555;
    margin: 0 0 10px 0;
  }

  .c_box h3 {
    clear: both;
    font-size: 20px;
    margin: 20px 0 0 0;
    font-weight: normal;
  }

  .c_box span.va {
    width: 90px;
    text-align: center;
    position: absolute;
    z-index: 22;
    background-color: #FFF;
    margin: -24px 0 0 -50px;
    border: 2px solid #d4d4d4;
    padding: 0 3px;
    font-size: 12px;
    line-height: 18px;
  }

  .c_box span.waitReview {
    background: #a0a0a0;
    color: #fff;
    padding: 2px 6px;
    margin: 0 0 0 15px;
  }

  .c_box a.applyC {
    background: #0d9572;
    color: #fff;
    padding: 2px 6px;
    margin: 0 0 0 15px;
  }

  #applyC {
    position: absolute;
    margin-left: -68px;
    width: 70px;
    filter: alpha(Opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    cursor: pointer;
  }

  .c_box .s_input {
    width: 430px;
    margin-bottom: 10px;
  }

  .c_box .s_input input {
    width: 412px;
  }

  .c_box .oneword {
    color: #777;
    overflow: hidden;
  }

  .companyName h2 {
    width: 300px;
    height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .content_r {
    float: left;
    width: 280px;
    margin-left: 64px;
  }

  .c_tags {
    position: relative;
    margin-bottom: 30px;
  }

  .c_tags table {
    width: 283px;
    color: #555;
    font-size: 18px;
    line-height: 24px;
  }

  .c_tags table td {
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
  }

  .c_tags table span.error {
    width: 140px;
    word-wrap: break-word;
  }

  .c_tags td {
    background: #fafafa;
    padding: 7px 10px;
  }

  .c_tags td a {
    color: #0d9572;
    text-decoration: underline;
  }

  .clearfix:after {
    content: "";
    height: 0;
    clear: both;
    visibility: hidden;
  }

  #container {
    width: 1024px;
    margin-top: 35px;
    margin-left: 250px;
    padding-bottom: 100px;

  }

  .c_section {
    margin-bottom: 40px;
    position: relative;
    background-color: #fafafa;
  }

  .c_section h2 {
    float: left;
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    height: 43px;
    background: #91cebe;
    margin: -8px 0 10px 40px; /*已投递简历状态:40px;old:20px*/
    padding: 0 20px;
    line-height: 43px;
    position: absolute;
    z-index: 2;
  }

  .c_section h2 em {
    background: url(img/title_arrow01.png) no-repeat;
    width: 6px;
    height: 8px;
    position: absolute;
    left: -6px;
    top: 0;
  }

  .c_section > dd {
    color: #555;
    padding: 50px 25px 20px 25px;
    clear: both;
  }

  .c_section_service > dd {
    color: #555;
    padding: 50px 0px 20px 25px;
    clear: both;
  }

  .c_section span.error {
    margin: 5px 0 10px 0;
  }
  .hot_pos_l {
    float: left;
    width: 360px;
  }

  .hot_pos_l a {
    text-decoration: underline;
  }

  .hot_pos_l a span {
    color: #0d9572;
    margin: 0;
  }
  .c7 {
    color: #777;
  }
  .hot_pos span {
    margin-right: 10px;
  }
</style>